<form class="form-horizontal" name="form" ng-submit="$modal.ok()">
    <div class="modal-header bg-primary">
        <h3 class="modal-title">Manage organisation links</h3>
    </div>
    <div class="modal-body">
        <div ng-show="$modal.organisations.length === 0">
            <div class="empty-message">No organisation can be linked</div>
        </div>

        <div ng-show="$modal.organisations.length > 0">
            <p>
                Please select the organisation(s) you want to make visible to users of organisation <strong>{{$modal.organisation.name}}</strong>
            </p>


            <table class="table table-hover">
                <thead>
                    <th width="40" class="text-center">
                        <input type="checkbox" ng-change="$modal.toggleLinkAll()" ng-model="$modal.allSelected">
                    </th>
                    <th>
                        Organisation
                    </th>
                    <th width="220">
                        Added at
                    </th>
                </thead>
                <tbody>
                    <tr ng-repeat="org in $modal.organisations" ng-click="$modal.toggleLink(org)">
                        <td width="40" class="text-center">
                            <input type="checkbox" ng-model="org.linked">
                        </td>
                        <td>
                            {{org.name}}
                        </td>
                        <td>
                            {{org.createdAt | shortDate}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default pull-left" type="button" ng-click="$modal.cancel()">Cancel</button>
        <button class="btn btn-primary pull-right" type="submit" ng-disabled="$modal.initialHash === $modal.hash">Save</button>
    </div>
</form>
